<div class="border-bottom">
  <h2 class="pt-3 pb-2"><%= t ".title" %></h2>
</div>

<%= render 'good_job/shared/chart_container', chart_data: GoodJob::PerformanceIndexChart.new.data %>

<div class="my-3 card">
  <div class="list-group list-group-flush text-nowrap" role="table">
    <header class="list-group-item bg-body-tertiary">
      <div class="row small text-muted text-uppercase align-items-center">
        <div class="col-12 col-lg-4"><%= t ".job_class" %></div>
        <div class="col-lg-2 d-none d-lg-block"><%= t ".executions" %></div>
        <div class="col-lg-2 d-none d-lg-block"><%= t ".average_duration" %></div>
        <div class="col-lg-2 d-none d-lg-block"><%= t ".minimum_duration" %></div>
        <div class="col-lg-2 d-none d-lg-block"><%= t ".maximum_duration" %></div>
      </div>
    </header>

    <% @performances.each do |performance| %>
      <div role="row" class="list-group-item py-3">
        <div class="row align-items-center">
          <div class="col-12 col-lg-4">
            <div class="d-flex gap-3 justify-content-between">
              <%= link_to performance.job_class, performance_path(performance.job_class) %>
            </div>
          </div>
          <div class="col-6 col-lg-2 text-wrap">
            <div class="d-lg-none small text-muted mt-1"><%= t ".executions" %></div>
            <%= performance.executions_count %>
          </div>
          <div class="col-6 col-lg-2 text-wrap">
            <div class="d-lg-none small text-muted mt-1"><%= t ".average_duration" %></div>
            <%= format_duration performance.avg_duration %>
          </div>
          <div class="col-6 col-lg-2 text-wrap">
            <div class="d-lg-none small text-muted mt-1"><%= t ".minimum_duration" %></div>
            <%= format_duration performance.min_duration %>
          </div>
          <div class="col-6 col-lg-2 text-wrap">
            <div class="d-lg-none small text-muted mt-1"><%= t ".maximum_duration" %></div>
            <%= format_duration performance.max_duration %>
          </div>
        </div>
      </div>
    <% end %>
  </div>
</div>

<div class="my-3 card">
  <div class="list-group list-group-flush text-nowrap" role="table">
    <header class="list-group-item bg-body-tertiary">
      <div class="row small text-muted text-uppercase align-items-center">
        <div class="col-12 col-lg-4"><%= t ".queue_name" %></div>
        <div class="col-lg-2 d-none d-lg-block"><%= t ".executions" %></div>
        <div class="col-lg-2 d-none d-lg-block"><%= t ".average_duration" %></div>
        <div class="col-lg-2 d-none d-lg-block"><%= t ".minimum_duration" %></div>
        <div class="col-lg-2 d-none d-lg-block"><%= t ".maximum_duration" %></div>
      </div>
    </header>

    <% @queue_performances.each do |performance| %>
      <div role="row" class="list-group-item py-3">
        <div class="row align-items-center">
          <div class="col-12 col-lg-4">
            <div class="d-flex gap-3 justify-content-between">
              <%= performance.queue_name %>
            </div>
          </div>
          <div class="col-6 col-lg-2 text-wrap">
            <div class="d-lg-none small text-muted mt-1"><%= t ".executions" %></div>
            <%= performance.executions_count %>
          </div>
          <div class="col-6 col-lg-2 text-wrap">
            <div class="d-lg-none small text-muted mt-1"><%= t ".average_duration" %></div>
            <%= format_duration performance.avg_duration %>
          </div>
          <div class="col-6 col-lg-2 text-wrap">
            <div class="d-lg-none small text-muted mt-1"><%= t ".minimum_duration" %></div>
            <%= format_duration performance.min_duration %>
          </div>
          <div class="col-6 col-lg-2 text-wrap">
            <div class="d-lg-none small text-muted mt-1"><%= t ".maximum_duration" %></div>
            <%= format_duration performance.max_duration %>
          </div>
        </div>
      </div>
    <% end %>
  </div>
</div>
